<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>机构查询 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css?t=a1">
   <style>
      .el-header {
         background-color: #B3C0D1;
         color: #333;
         line-height: 60px;
      }

      .el-aside {
         color: #333;
      }

      html,
      body,
      #app,
      .el-container {
         padding: 0px;
         margin: 0px;
         height: 100%;
      }

      .my-layout-admin {
         position: fixed;
         top: 46px;
         left: 400px;
         right: 0px;
         bottom: 0px;
      }

      .mydmin-iframe {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
      }

      /* 菜单后面小三角的图标颜色 */
      .el-submenu__title i {
         color: #eee;
      }

      .el-tree-node__expand-icon.is-leaf {
         color: #c0c4cc;
         cursor: default;
         transform: rotate(90deg);
      }

      .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
         background-color: #fbe0e0;
      }
   </style>
</head>

<body>
   <div id="app">

      <el-container style="height: 100%; border: 0px solid #eee;">
         <el-aside width="400px" style="background-color: #eee;border-right: 1px solid #ddd;">
            <div>
               <el-input placeholder="可选搜索内容" v-model="filterText" size="small">
                  <template slot="prepend">机构名称:</template>
               </el-input>
               <div style="margin-top: 5px;overflow-y:auto;" :style="{height:treeHeight + 'px'}">
                  <el-tree ref="orgTreeRef" v-loading="tableLoading" :data="orgTreeData" :props="defaultProps"
                     default-expand-all highlight-current node-key="id" :filter-node-method="filterNode"
                     @node-click="handleNodeClick">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }} </span>
                     </span>
                  </el-tree>
               </div>
            </div>
         </el-aside>

         <el-container>
            <el-main style="padding: 3px;">
               <el-card shadow="always" style="padding: 10px;">
                  <el-steps :active="stepActive" finish-status="success" align-center>
                     <el-step title="步骤 1" description="请选择左边需要上传线下学习资料的公司"></el-step>
                     <el-step title="步骤 2" description="上传该公司线下学习统计 Excel 文件"></el-step>
                     <el-step title="步骤 3" description="请上传现场教学拍摄视频文件，视频中要出现讲师及学员"></el-step>
                     <el-step title="步骤 4" description="查看上传结果并确认"></el-step>
                     <el-step title="步骤 5" description="完成"></el-step>
                  </el-steps>
               </el-card>

               <el-card shadow="always" v-show="stepActive == 0" style="padding: 10px;margin-top: 10px;" :style="{'height': (treeHeight - 80 ) + 'px'}">
                  注意：<br />
                  <p>1.不支持使用IE浏览器.</p>

                  <p>2.360浏览器请使用极速模式.</p>

                  <p>3.请使用谷歌,火狐等浏览器.</p>

                  <p>4.手动清空浏览器上的缓存.</p>

                  <p>5.技术支持电话:400-XXXX-XXXXX </p>
               </el-card>

               <el-card shadow="always" v-show="stepActive == 1" style="padding: 10px;margin-top: 10px;" :style="{'height': (treeHeight - 80 ) + 'px'}">
                  <p>上传 <b>{{currentCompanyName}}</b> 线下学员记录Excel文件：</p>
                  <div>
                     <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :limit="9"
                        list-type=".xlsx" :on-success="uploadExcelSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                     </el-upload>
                  </div>
                  <br><br>
                  <p>注意：</p>
                  <p>1：仅支持上传 .xlsx 文件。（如果是 .xls 文件，请在Office Excel 或 WPS表格 中另存为 xlsx 文件后再上传）。</p>
                  <p>2：xlsx文件格式请参考<a href="#">模板文件</a>。</p>
                  <p>3：带 * 号字段为必填项，如果该字段值是空的则认为数据无效。</p>
                  <p>4：身份证号必须为真实身份证号，系统会进行基础验证，验证失败则数据无效。</p>
                  <p>5：手机号必须为真实手机号码。</p>
               </el-card>

               <el-card shadow="always" v-show="stepActive == 2" style="padding: 10px;margin-top: 10px;" :style="{'height': (treeHeight - 80 ) + 'px'}">
                  <p>上传 <b>{{currentCompanyName}}</b> 线下教学视频文件：</p>
                  <div>
                     <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :limit="9"
                        list-type=".mp4" :on-success="uploadVideoSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                     </el-upload>
                  </div>
                  <br><br>
                  <p>注意：</p>
                  <p>1：仅支持上传 .mp4 文件。</p>
                  <p>2：该视频文件需为现场录制视频。</p>
                  <p>3：视频中需要出现讲师及学员的画面。</p>
                  <p>4：视频不低于10秒钟，不高于1分钟。</p>
               </el-card>

               <el-card shadow="always" v-show="stepActive == 3" style="padding: 2px;margin-top: 10px;">
                  <div style="padding: 10px;">
                     本次上传学员列表：
                     <el-button type="success" @click="checkSuccess" size="small">已检查，并确认无误</el-button>
                     <el-button type="warning" @click="checkFail" size="small">有误，返回步骤1重新上传文件</el-button>
                  </div>
                  <el-table style="width: 100%;"
                     :cell-style="{padding:'5px'}" row-key="id" border highlight-current-row  :height="treeHeight - 156" :max-height="treeHeight - 156" size="small">
                     <el-table-column prop="id" label="学员ID" width="90" fixed="left">
                     </el-table-column>
                     <el-table-column prop="real_name" label="姓名" width="100" fixed="left">
                     </el-table-column>
                     <el-table-column prop="org_name" label="所属公司" width="160" show-overflow-tooltip>
                     </el-table-column>
                     <el-table-column prop="idcard" label="身份证号" width="160">
                     </el-table-column>
                     <el-table-column prop="phone" label="手机号" width="120">
                     </el-table-column>
                     <el-table-column prop="phone" label="学习时间" width="120">
                     </el-table-column>
                     <el-table-column prop="phone" label="学习结果" width="120">
                     </el-table-column>
                     <el-table-column prop="phone" label="学习内容" width="120">
                     </el-table-column>
                     <el-table-column prop="phone" label="学习时长" width="120">
                     </el-table-column>
                  </el-table>
               </el-card>

               <el-card shadow="always" v-show="stepActive == 4" style="padding: 10px;margin-top: 10px;" :style="{'height': (treeHeight - 80 ) + 'px'}">
                  <div style="height: 200px;">
                      <div style="color: #67c23a;margin-top:100px;text-align: center;">
                        <i class="el-icon-success" style="font-size: 5rem;"></i>
                        <div style="margin-top: 20px;font-size:3rem;">提交成功</div>
                      </div>
                  </div> 
               </el-card>

            </el-main>
         </el-container>
      </el-container>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/my_util.js"></script>

<script>

   var marginHeight = 150; // 高差数


   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            treeHeight: window.innerHeight - marginHeight,                 // tree高，当窗口改变大小的时候通过 pageResize 修改该值
            tableLoading: false,       // 显示加载中
            orgTreeData: [],           // 机构树形数据  
            filterText: '',
            stepActive: 0,
            currentCompanyId: 0,
            currentCompanyName: '',

            // tree 控件配置
            defaultProps: {
               children: 'children',
               label: 'name',
               isLeaf: 'leaf',
            },

         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      computed: {
      },
      watch: {
         // 监控文本变化
         filterText(val) {
            this.$refs.orgTreeRef.filter(val);
         }
      },
      methods: {
         // 改变高度
         pageResize() {
            this.treeHeight = window.innerHeight - marginHeight;
         },

         // 过滤
         filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
         },

         // 选择tree中的项
         handleNodeClick(data) {
            if (data.type === 2 && this.stepActive < 1) {
               this.currentCompanyId = data.id;
               this.currentCompanyName = data.name;
               this.stepActive = 1;
            }
         },

         uploadExcelSuccess() {
            this.stepActive = 2;
         },

         uploadVideoSuccess() {
            this.stepActive = 3;
         },

         checkSuccess() {
            this.stepActive = 4;
         },

         checkFail() {
            this.stepActive = 1;
         },
      },
   });

   // 提供给子页面调用的方法。
   // 返回勾选项ID列表
   function getCheckedKeysToCallback() {
      return vm.$refs.orgTreeRef.getCheckedKeys();
   }

   // 读取当前管理员权限允许的树形数据列表
   function loadSysOrganDataBySessionMember() {
      // 获取组织机构数据
      vm.tableLoading = true;
      axios.get('/admin/organ/show/sys_organ!member_pid.bu')
         .then(function (response) {
            console.log(response.data);
            if (response.data.code > 0) {
               vm.orgTreeData = response.data.bundle;

               vm.showSearchTree = false;              // 显示正常tree 
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
            vm.tableLoading = false;
         })
         .catch(function (error) {
            vm.tableLoading = false;
            vm.$message.error('获取数据失败！' + error);
         });
   }

   // 初始化系统参数，管理员信息等
   function loadInitData() {

      // 读取参数信息至缓存
      axios.get('/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })

   };


   loadInitData();                     // 初始化系统参数，管理员信息等
   loadSysOrganDataBySessionMember();  // 读取当前管理员权限允许的树形数据列表

</script>

</html>